<template>
    <div class="searchBar">
        <div class="title"><strong>{{title}}</strong></div>
        <div class="search">
            <input type="search" :placeholder="currentPlaceholder" class="search-input">
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'; // 添加对 computed 的导入

const title = "有品";

// 使用ref创建响应式数据
const placeholders = ref(['冰箱', '风扇', '电视']);
const currentPlaceholderIndex = ref(0);

// 计算属性，返回当前占位符
const currentPlaceholder = computed(() => placeholders.value[currentPlaceholderIndex.value]);

// 定义切换占位符的定时器ID
let intervalId;

// 方法：开始切换占位符
const startPlaceholderSwitch = () => {
    intervalId = setInterval(() => {
        currentPlaceholderIndex.value = (currentPlaceholderIndex.value + 1) % placeholders.value.length;
    }, 2000); // 每2秒更换一次
};

// 生命周期钩子：组件挂载后开始切换
onMounted(startPlaceholderSwitch);

// 生命周期钩子：组件销毁前清理定时器
onBeforeUnmount(() => {
    clearInterval(intervalId);
});
</script>

<style scoped>
.searchBar {
    background-color: rgb(251, 251, 251);
    padding: 1rem 0 0 0;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index:1000;
}

.title {
    font-family: "楷体";
    width: 6rem;
    margin: 0 2rem 0 2rem;
    font-size: 2.5rem;
    color: #b8762a;
}

.search {
    padding: 0 3rem 0 0;
    position: relative;
    width: 100%; /* 让搜索框宽度适应其容器 */
}

.search-input {
    font-size: 1.5rem;
    width: 100%;
    padding: 8px 12px; /* 内边距，提升用户体验 */
    border: 1px solid #ccc;
    border-radius: 24px; /* 圆角美化 */
    outline: none; /* 移除默认轮廓 */
    box-sizing: border-box; /* 保证内边距和边框计算在宽度内 */
}

/* 可选的悬停和聚焦状态样式 */
.search-input:hover,
.search-input:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

@media (max-width: 768px) { /* 选择一个适合移动设备的断点，这里以480px为例 */
    .searchBar {
        padding: 1rem 0 0 0; /* 减少内边距，为小屏幕腾出更多空间 */
    }

    .title {
        font-size: 1.5rem; /* 减小标题字体大小 */
        margin: 0 1rem 0 1rem;
    }

    .search-input {
        font-size: 1rem; /* 减小输入框内的字体大小 */
    }
}
</style>

